// 侧边导航
	$('.side .item>div>a').click(function(event){
		$(this).parent().parent().siblings().removeClass('on')
		$(this).parent().parent().toggleClass('on')
	})
	
	$(".checkalls").change(function(){
		//如果全选被选中，则选中所有子选项;否则取消选中子选项
		showMap(tabdata1)
		if($(this).is(":checked")){
			$(".checkall").prop("checked",true);
			$(".checkitem").prop("checked",true)
		}else{
			$(".checkall").prop("checked",false);
			$(".checkitem").prop("checked",false)
		}
	});
	
	$(".checkall").change(function(){
		if($(".checkall:checked").length==$(".checkall").length){
			$(".checkalls").prop("checked",true);
		}else{
			$(".checkalls").prop("checked",false);
		}
	});
	
	// 侧边选择
	 $(".checkall").change(function(){
		//如果全选被选中，则选中所有子选项;否则取消选中子选项
		showMap(tabdata1)
		if($(this).is(":checked")){
			$(this).parent().siblings().children().find('input').prop("checked",true);
		}else{
			$(this).parent().siblings().children().find('input').prop("checked",false);
		}
	});
         
	//当改变子选项时，需要判断子选项是否全部被选中，如果全部被选中，那么全选被选中；否则全选不被选中
	$(".checkitem").change(function(){
		if($(this).parents('.sub').find('input:checked').length==$(this).parents('.sub').find('input').length){
			$(this).parents('.sub').siblings().find('input').prop("checked",true);
		}else{
			$(this).parents('.sub').siblings().find('input').prop("checked",false);
		}
		if($(".checkall:checked").length==$(".checkall").length){
			$(".checkalls").prop("checked",true);
		}else{
			$(".checkalls").prop("checked",false);
		}
	});
	
	// 清除搜索框内容
	$('.tabDiv').on('click','.search .clear',function(){
		$('.keywords').val("");
	})
	$('.tabDiv').on('click','.search button',function(){
		var kw=$('.keywords').val()
		if(kw.trim()){
			showMap(tabdata1)
		}else{
			alert("请输入搜索词")
		}
	})
	
	// 右侧tab切换
	$('.tab').on('click','li',function(){
		$(this).siblings().removeClass('on')
		$(this).addClass('on')
		var currentindex=$(this).index()
		$('.tabDiv>ul>li').eq(currentindex).siblings().hide()
		$('.tabDiv>ul>li').eq(currentindex).show()
	})
	
	// 右侧列表滚动
	function work(scrolldata){
		$('.scroll1').html('')
		scrolldata.forEach(function(item,key){
			$('.scroll1').append(`
				<li class="">
					<a href="" class="clearfix">
						<span>
							<img src="${item.imgurl}" >
							${item.title}
						</span>
						<span>详情 ></span>
					</a>
				</li>
			`)
		})
		var timer1 = setInterval(function() {
			timer1=topScroll(".scroll1",2000);
		},3000);
		$('.scroll1 li').on('mouseover',function(){
			clearInterval(timer1)
		})
		$('.scroll1 li').on('mouseout',function(){
			timer1 = setInterval(function() {
				topScroll(".scroll1",2000);
			},3000);
		})
	}
	
	// 中间导航
	function nav(navdata){
		$('.nav ul').html('')
		navdata.forEach(function(item,key){
			var detailatr=""
			if(item.detail){
				detailatr=`
					<div class="detail">
						<p>机扫车：${item.detail.num1}/${item.num}</p>
						<p>洒水车：${item.detail.num2}/${item.num}</p>
						<p>雾炮车：${item.detail.num3}/${item.num}</p>
						<p>高压清洗车：${item.detail.num4}/${item.num}</p>
						<p>洗扫一体车：${item.detail.num5}/${item.num}</p>
						<p>人行道清扫车：${item.detail.num6}/${item.num}</p>
					</div>
				`
			}
			$('.nav ul').append(`
				<li>
					<img src="${item.imgurl}" >
					<span>${item.name}：${item.num}</span>
					${detailatr}
				</li>
			`)
		})
	}
	
	function tab(tabdata){
		$('.tab ul').html('')
		$('.tabDiv ul').html('')
		tabdata.forEach(function(item,key){
			if(key==0){
				$('.tab ul').append(`
					<li class="on">${item.title}</li>
				`)
			}else{
				$('.tab ul').append(`
					<li class="">${item.title}</li>
				`)
			}
			
			var icons=""
			tabdata[key]['bnav'].forEach(function(item1,key1){
				icons+=`<a href="${item1.url}"><img src="${item1.imgurl}" ></a>`
			})
			var lists=""
			tabdata[key]['list'].forEach(function(item2,key2){
				if(item2.state=="离线"){
					lists+=`<li class="clearfix out">
						<div class="list-l">
							<p class="p1" onclick="openDetail(${key},${key2})">${item2.title}</p>
							<p class="p2">${item2.band}</p>
							<p class="p2">所属单位：${item2.adr}</p>
							<p class="p2">最近在线：${item2.date}</p>
						</div>
						<div class="list-r">
							<span>${item2.state}</span>
						</div>
					</li>`
				}else{
					lists+=`<li class="clearfix">
						<div class="list-l">
							<p class="p1" onclick="openDetail(${key},${key2})">${item2.title}</p>
							<p class="p2">${item2.band}</p>
							<p class="p2">所属单位：${item2.adr}</p>
							<p class="p2">最近在线：${item2.date}</p>
						</div>
						<div class="list-r">
							<span>${item2.state}</span>
						</div>
					</li>`
				}
				
			})
			$('.tabDiv ul').append(`
				<li class="lis">
					<div class="bnav">
						${icons}
					</div>
					<div class="search">
						<input type="text" name="" class="keywords" placeholder="机扫车" id="" value="" />
						<span class="clear"><img src="img/clear.png" ></span>
						<button type="button"><img src="img/search.png" ></button>
					</div>
					<div class="list">
						<ul>
							${lists}								
						</ul>
					</div>
				</li>
			`)
		})
	}
	
	
	// 下拉筛选
	$('.choose select').change(function(){
		var choosedata=$('.choose select').val()
		if(choosedata=='person'){
			showMap(tabdata1)
		}else if(choosedata=='car'){
			showMap(tabdata)
		}else{
			showMap(tabdata1)
		}
	})
	// 向上滚动函数
	function topScroll(enType,steep) { //滚动效果函数
	  var noticeListH = $(enType+" li").height(), //获取滚动的li的高度
		noticeH = $(enType).parent().height(), //获取展示区域的高度
		noticeHListNum = Math.ceil(noticeH / noticeListH), //获取展示区域一共可以展示多少条数据,这里是因为布局的原因才*2的如果一行只有一个不需要*2
		listNum = $(enType+" li").length;
	  if(listNum > noticeHListNum) {
		$(enType).animate({
		  'marginTop':-noticeListH+'px'
		},steep,'swing',function() { //当动画结束直接回调下面的函数
		  $(enType+' li:first').appendTo($(enType));
		  $(enType).css({'marginTop':'0'+'px'});
		});
	  }
	}